<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>已提交审批详情</title>
    <link href="../css/font.css" type="text/css" rel="stylesheet">
    <link href="../css/style.css" type="text/css" rel="stylesheet">
    <!--block[hdcss]-->

    <!--block[hdcss]end-->
</head>
<body>
<!--block[content]-->
<section class="wrap">
    <div class="page">
        <!--<header class="hd">头部 </header>-->
        <div class="m-check-status">
            <div class="u-btn u-btn-error" id="check_status_2"  style="display:none">审核意见中(审批中)</div>
            <div class="u-btn u-btn-disabled" id="check_status_0" style="display:none">审核未通过</div>
            <div class="u-btn" style="display:none" id="check_status_1" >审核通过</div>
        </div>
        <ul class="m-info" id="m-info">

        </ul>


        <!--<div class="u-btn-area">-->
            <!--<a class="u-btn u-btn-error" href="javascript:void(0)">-->
                <!--删&nbsp;&nbsp;除-->
            <!--</a>-->
        <!--</div>-->
        <div class="m-tlt-s1">
            审批意见
        </div>
        <ul class="m-list m-list-reply" id="m-list-reply">

        </ul>
    </div>
</section>
<footer class="ft">底部 </footer>
<div class="m-fixed-reply">
    <label>回复</label>
    <input type="text" id="iptReply" />
    <a href="javascript:void(0)" id="send-message" class="u-btn">发送</a>
</div>
<script type="text/tmpl" id="jTmpl_comment">
    {{#data}}
    <li order_id={{order_id}} user_id="{{user_id}}">
        <div class="thumb"><img src="{{avatar}}" alt=""></div>
        <div class="cont">
            <div class="info">
                <span class="jobTitle">{{name}}</span>
                <span class="date">{{created_at}}</span>
            </div>
            <div class="reply">
                {{content}}
            </div>
        </div>
    </li>
    {{/data}}
</script>
<script type="text/tmpl" id="jTmpl_list">
    <li>
        <div class="list-item">约见人</div>
        <span class="list-val"> {{inviter_name}}</span>

    </li>
    <li>
        <div class="list-item">标题</div>
        <span class="list-val"> {{subject}}</span>

    </li>
    <li>
        <div class="list-item">事由</div>
        <span class="list-val"> {{content}}</span>
    </li>
    <li>
        <div class="list-item">约见日期</div>
        <span class="list-val"> {{start_at}}</span>

    </li>
    <li>
        <div class="list-item">时长</div>
        <span class="list-val"> {{duration}}小时</span>

    </li>
    <li>
        <div class="list-item">联系方式</div>
        <span class="list-val">{{phone}}</span>
    </li>
</script>
<!--block[content]end-->
<script src="../js/lib/zepto.min.js" type="text/javascript"></script>
<script src="../js/lib/mustache.js" type="text/javascript"></script>
<script src="../js/plugin/juicer-min.js" type="text/javascript"></script>
<script type="text/javascript">

    function getQueryString(name) {  
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");  
        var r = window.location.search.substr(1).match(reg);  
        if (r != null) return unescape(r[2]); return null;  
    };

    var getDate = function(url,callback){
        var type =  type || 'get';
        $.ajax({
            url:url,// 跳转到 action
            type:'get',
            dataType:'jsonp',
            success:function(data) {
                callback && callback(data);
            }
        });
    };

    let order_id = getQueryString('order_id') || '';

    const tpl = $('#jTmpl_list').html();

    const baseUrl = 'http://www.7paxiu.com/';
    let url = baseUrl + 'order/show?order_id='+order_id+'&callback=';
    getDate(url,function(data){
        console.log(data)
        if(data && data.code == 200){
            if(!data.data){
                alert('加载失败')
            }

            $('#check_status_'+data.data.check_status).show();
            let element = Mustache.render(tpl, data.data);
            $('#m-info').html(element);
        }
    });

    
    let comment_url = baseUrl + 'comment/list?order_id='+order_id+'&callback=';
    let cooment_tpl = $('#jTmpl_comment').html();
    getDate(comment_url,function(data){
        console.log(data)
        if(data && data.code == 200){
            if(!data.data){
                alert('加载失败')
            }

            let element = Mustache.render(cooment_tpl, data.data);

            $('#m-list-reply').html(element);
            
        }
    });

    let getComment = function(){
        getDate(comment_url,function(data){
            if(data && data.code == 200){
                if(!data.data){
                    alert('加载失败')
                }

                let element = Mustache.render(cooment_tpl, data.data);

                $('#m-list-reply').html(element);
                
            }
        });
    };

    getComment();

    $('#send-message').on('click',function(){
        let txt = $('#iptReply').val();
        if(txt == ''){
            alert('内容不能为空');
            return false;
        }

        var data = {
            order_id:order_id,
            content:txt,
        }

        $.ajax({
            url:'http://www.7paxiu.com/comment/create',// 跳转到 action
            type:'post',
            data:data,
            success:function(data) {
                if(data && data.code == 200){
                    $('#iptReply').val('')
                    getComment();
                }
                
            }
        });

    })


</script>
<!--block[endscript]end-->
</body>
</html>